<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
		pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page import="com.github.pagehelper.PageInfo"%>
<%@ page import="student.beans.Student"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生信息</title>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<meta name="viewport"
		content="width=device-width,initial-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css"
		href="${APP_PATH}/bootstrap3/css/bootstrap.css">
<link rel="stylesheet" type="text/css"
		href="${APP_PATH}/bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
</head>
<body>
	<input type="hidden" name="itemPram">
	<input type="hidden" name="termPram">
	
	<!-- 学生增加模态框 -->
	<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" id="addStudentModal">
			  <div class="modal-dialog" role="document">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			        <h4 class="modal-title" id="myModalLabel">添加学生信息</h4>
			      </div>
			      <div class="modal-body">
			      <form class="form-horizontal" id="add_student_form">
					  <div class="form-group">
					    <label  class="col-sm-2 control-label">姓名</label>
					    <div class="col-sm-5">
					      <input type="text" class="form-control" name="stuName" placeholder="姓名">
					    </div>
					      <div class="col-sm-5" title="checkInfo"></div>
					  </div>
					  <div class="form-group">
					    <label  class="col-sm-2 control-label">年龄</label>
					    <div class="col-sm-5">
					      <input type="text" class="form-control" name="age" placeholder="年龄">
					    </div>
					    <div class="col-sm-5" title="checkInfo"></div>
					  </div>
						<div class="form-group">
					    <label  class="col-sm-2 control-label">性别</label>
					    <div class="col-sm-10">
					      <label class="radio-inline">
								  <input type="radio" name="gender" value="m" checked="checked"> 男
								</label>
								<label class="radio-inline">
								  <input type="radio" name="gender" value="f"> 女
								</label>
					    </div>
					  </div>
					  <div class="form-group">
					    <label  class="col-sm-2 control-label" >电话</label>
					    <div class="col-sm-5">
					      <input type="text" class="form-control" name="phone" placeholder="电话">
					    </div>
					    <div class="col-sm-5" title="checkInfo"></div>
					  </div>
					  <div class="form-group">
					    <label  class="col-sm-2 control-label">地址</label>
					    <div class="col-sm-10">
					    				<div class="col-sm-4">
					    							<select class="form-control" name="province">
														  <option>上海</option>
														  <option>浙江</option>
														  <option>江西</option>
														  <option>山东</option>
														  <option>北京</option>
														</select>
					    				</div>
					    					<div class="col-sm-4">
					    								<select class="form-control" name="city">
															<option>上海</option>
														  <option>杭州</option>
														  <option>嘉兴</option>
														  <option>温州</option>
														  <option>北京</option>
														</select>	
					    					</div>
					    					<div class="col-sm-4">
					    							<select class="form-control" name="county">
														<option>永嘉</option>
														  <option>乐清</option>
														  <option>瑞安</option>
														  <option>鹿城</option>
														  <option>瓯海</option>
														</select>
					    					</div>										
					    </div>					    			    
					  </div>
					  	<div class="form-group">
					    <label  class="col-sm-2 control-label">街道</label>
						    <div class="col-sm-5">
						      <input type="text" name="street"  class="form-control">
						    </div>
					  	</div>	
					  <div class="modal-footer">
			        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			        <button type="button" class="btn btn-primary" id="add_student_submit">保存</button>
			      </div>
					</form>	
			      </div>		      
			    </div>
			  </div>
			</div>
	<!--  学生编辑模态框-->	
	<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" id="editStudentModal">
			  <div class="modal-dialog" role="document">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			        <h4 class="modal-title" id="myModalLabel">添加学生信息</h4>
			      </div>
			      <div class="modal-body">
			      <form class="form-horizontal" id="edit_student_form">
					  <div class="form-group">
					    <label  class="col-sm-2 control-label">姓名</label>
					    <div class="col-sm-5">
					      <input type="hidden" name="stuId">
					      <input type="text" class="form-control" name="stuName" placeholder="姓名">
					    </div>
					      <div class="col-sm-5" title="checkInfo"></div>
					  </div>
					  <div class="form-group">
					    <label  class="col-sm-2 control-label">年龄</label>
					    <div class="col-sm-5">
					      <input type="text" class="form-control" name="age" placeholder="年龄">
					    </div>
					    <div class="col-sm-5" title="checkInfo"></div>
					  </div>
						<div class="form-group">
					    <label  class="col-sm-2 control-label">性别</label>
					    <div class="col-sm-10">
					      <label class="radio-inline">
								  <input type="radio" name="gender" value="m" checked="checked"> 男
								</label>
								<label class="radio-inline">
								  <input type="radio" name="gender" value="f"> 女
								</label>
					    </div>
					  </div>
					  <div class="form-group">
					    <label  class="col-sm-2 control-label" >电话</label>
					    <div class="col-sm-5">
					      <input type="text" class="form-control" name="phone" placeholder="电话">
					    </div>
					    <div class="col-sm-5" title="checkInfo"></div>
					  </div>
					  	<div class="form-group">
					    <label  class="col-sm-2 control-label">地址</label>
						    <div class="col-sm-5">
						    <textarea class="form-control" rows="3" name="address"></textarea>
						    </div>
					  	</div>	
					  <div class="modal-footer">
			        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			        <button type="button" class="btn btn-primary" id="edit_student_submit">保存</button>
			      </div>
					</form>	
			      </div>		      
			    </div>
			  </div>
			</div>	

		<!--  页面显示块-->
		<div class="container">
				<div class="row well">
						<div class="col-md-4 col-md-offset-5">
								<h1>学生信息</h1>
						</div>
				</div>
				<div class="row">
						<div class="col-md-9 ">
								<div class="col-md-6">
										<div class="input-group">
												<div class="input-group-btn">
														<button type="button"
																class="btn btn-default dropdown-toggle"
																data-toggle="dropdown" aria-haspopup="true"
																aria-expanded="false">
																choose <span class="caret"></span>
														</button>
														<ul class="dropdown-menu">
																<li><a>Id</a></li>
																<li><a>name</a></li>
																<li><a>phone</a></li>
														</ul>
												</div>
												<form class="navbar-form navbar-left"  id="query_form">
														<input type="text" class="form-control" placeholder="Search" name="term">
														<input type="hidden" name="item" value="Id">
														<button  class="btn btn-default" id="query_bnt">查询</button>
												</form>
										</div>
								</div>
						</div>
						<div class="col-md-3 ">
								<button class="btn btn-primary"  id="addStudentBtn">
										<span></span>新增
								</button>
								<button class="btn btn-danger" id="deleteAllStudentBtn">
										<span></span>删除
								</button>
						</div>
				</div>

				<br>
				<div class="row">
						<table class="table table-hover" id="student_list">
							<thead>
								<tr>
										<th><span class="fa fa-check-square"></span></th>
										<th>学号</th>
										<th>姓名</th>
										<th>年龄</th>
										<th>性别</th>
										<th>电话</th>
										<th>操作</th>
								</tr>
								</thead>
								<tbody>
								</tbody>							
						</table>
				</div>
				<div class="row">
						<div class="col-md-4" id="page_info_total">
						</div>
				</div>
				<div class="row">
						<div class="col-md-4 col-md-offset-8">
								<nav aria-label="...">
										<ul class="pagination">												
										</ul>
								</nav>
						</div>
				</div>
		</div>
		<script type="text/javascript"
				src="${APP_PATH}/bootstrap3/jquery.min.js"></script>
		<script type="text/javascript"
				src="${APP_PATH}/bootstrap3/js/bootstrap.js"></script>
		<script type="text/javascript"
				src="${APP_PATH}/bootstrap3/js/holder.js"></script>
		<script type="text/javascript"
				src="${APP_PATH}/bootstrap3/js/html5shiv.min.js"></script>
		<script type="text/javascript"
				src="${APP_PATH}/bootstrap3/js/css3-mediaqueries.js"></script>
		<script type="text/javascript" src="${APP_PATH}/bootstrap3/js/respond.min.js"></script>
		<script type="text/javascript" src="${APP_PATH}/myjs/stuList.js"></script>
		
		<!-- 保存学生信息的js -->
		<script type="text/javascript">
			//点加表单的保存按钮,检查数据是否合法,正确保存学生信息返回到最后一条显示刚刚保存的记录
				$("#add_student_submit").click(function(){
					var formInfo=$("#add_student_form").serialize();
					var stuNname=$("#add_student_form input[name='stuName']").val();
					var age=$("#add_student_form input[name='age']").val();
					var phone=$("#add_student_form input[name='phone']").val();
					var address=$("select[name='province']").val()+$("select[name='city']").val()+$("select[name='county']").val()+$("#add_student_form input[name='street']").val();;
					formInfo+="&address="+address;
					if(!checkStudentForm(stuNname,age,phone)){
						alert("不合法的值");
						return false;
					}  
					$.ajax({
						url : "${APP_PATH}/addStudent",
						data : formInfo,
						type:"POST",
						success:function(result){	
							if(result.code==100){
								alert(result.msg);
								to_page(totalItem, null, null);
								$("#addStudentModal").modal('hide');
							}else{
								//console.log(result);
								if(undefined!=result.extend.errorsMessage.stuName){
									var nameReg=/^[\w\u2E80-\u9FFF]{2,10}$/;
									checkInfo($("form input[name='stuName']"),nameReg,"姓名不合法");
								}
								if(undefined!=result.extend.errorsMessage.phone){
									var phoneReg=/^[1-9][\d]{4,10}$/;
									checkInfo($("form input[name='phone']"),phoneReg,"电话号码不合法");
								}
							}
							
						}
					});
					
					//return false;
				});
			    //点击编辑保存按钮触发事件
				$("#edit_student_submit").click(function(){
					var formInfo=$("#edit_student_form").serialize();
					var stuId=$("#edit_student_form input[name='stuId']").val();
					var stuNname=$("#edit_student_form input[name='stuName']").val();
					var age=$("#edit_student_form input[name='age']").val();
					var phone=$("#edit_student_form input[name='phone']").val();
					if(!checkStudentForm(stuNname,age,phone)){
						alert("不合法的值");
						return false;
					} 
					$.ajax({
						url : "${APP_PATH}/editStudent",
						data : formInfo,
						type:"POST",
						success:function(result){								
							if(result.code==100){
								alert(result.msg);
								to_page(currentPage, null, null);
								$("#editStudentModal").modal('hide');
							}else{
								//console.log(result);
								if(undefined!=result.extend.errorsMessage.stuName){
									var nameReg=/^[\w\u2E80-\u9FFF]{2,10}$/;
									checkInfo($("form input[name='stuName']"),nameReg,"姓名不合法");
								}
								if(undefined!=result.extend.errorsMessage.phone){
									var phoneReg=/^[1-9][\d]{4,10}$/;
									checkInfo($("form input[name='phone']"),phoneReg,"电话号码不合法");
								}
							}
						}
					});					
				});
				//检查表单里的数据是否合法
				function checkStudentForm(stu_name,age,phone){
					var result=false;
					var nameReg=/^[\w\u2E80-\u9FFF]{2,10}$/;
					var ageReg=/^[1-9][0-9]$/;
					var phoneReg=/^[1-9][\d]{4,10}$/;
					if(nameReg.test(stu_name)&&ageReg.test(age)&&phoneReg.test(phone)){
						result=true;
					}
					return result;
				}
				//检查姓名是否合法
				$("form input[name='stuName']").change(function(){
					var nameReg=/^[\w\u2E80-\u9FFF]{2,10}$/
					checkInfo($(this),nameReg,"姓名不合法");					
				});								
				//检查年龄是否合法
				$("form input[name='age']").change(function(){
					var ageReg=/^[1-9][0-9]$/;
					checkInfo($(this),ageReg,"年龄不合法");					
				});
				//检查电话是否合法
				$("form input[name='phone']").change(function(){
					var phoneReg=/^[1-9][\d]{4,10}$/;
					checkInfo($(this),phoneReg,"电话号码不合法");					
				});
				//点击增加按钮弹出增加学生模态框 
				$("#addStudentBtn").click(function(){
					resetAddStudentForm();
					$("#addStudentModal").modal({
						backdrop:"static"
					});
				});
				//清空增加模态框 你的内容
				function resetAddStudentForm(){
					$("#add_student_form input[name='stuName']").val("");
					$("#add_student_form input[name='age']").val("");
					$("#add_student_form input[name='phone']").val("");
					$("#add_student_form input[name='street']").val("");
					$("#add_student_form div[title='checkInfo']").empty();				
				}
				//检查方法的抽取
				function checkInfo(ob,reg,message){
					ob.parent().next().empty();
					if(!reg.test(ob.val())){
						ob.parent().next().append("<span class='fa fa-times' >"+message+"</span>");
						ob.parent().next().children("span").css("color","red");
						return;
					}
					ob.parent().next().append("<span class='fa fa-check-square-o'></span>");
					ob.parent().next().children("span").css("color","green");
				}
		</script>
		
		<script type="text/javascript">		
		var currentPage;
		var totalItem;
		$(function() {
			var pageNo = 1;
			var item = $("body>input[name='itemPram']").val();
			var term = $("body>input[name='termPram']").val();
			to_page(pageNo, item, term);
		});
		
		function to_page(pageNo, item, term) {
			$.ajax({
				url : "${APP_PATH}/listStudents",
				data : "pageNo=" + pageNo + "&item=" + item + "&term=" + term,
				type : "GET",
				success : function(result) {
					build_student_table(result);
					build_page_info(result);
				}
			})			
		}
		//显示学生表格内容
		function build_student_table(result) {
			// 清空table表格
			$("#student_list>tbody").empty();
			var students = result.extend.PageInfo.list;
			$.each(students,function(index, item) {
								var checkTd = $("<td><input type='checkbox' name='checks'><input type='hidden' name='address' value='"+item.address+"'></td>")
								var stuIdTd = $("<td></td>").append(item.stuId);
								var stuNameTd = $("<td></td>").append(item.stuName);
								var stuAgeTd = $("<td></td>").append(item.age);
								var stuGenderTd = $("<td></td>").append(item.gender == 'm' ? "男" : "女");
								var stuPhoneTd = $("<td></td>").append(item.phone);
								var bntTd = $("<td></td>").append($("<button title='table_edit'></button>").addClass("btn btn-primary btn-sm").append("编辑").append($("<span></span>").addClass("glyphicon glyphicon-pencil")));
								bntTd.append(" ");
								bntTd.append($("<button title='table_delete'></button>").addClass("btn btn-danger btn-sm").append("删除").append($("<span></span>").addClass("glyphicon glyphicon-trash")));
								$("<tr></tr>").append(checkTd)
															 .append(stuIdTd)
															 .append(stuNameTd)
															 .append(stuAgeTd)
															 .append(stuGenderTd)
															 .append(stuPhoneTd)
															 .append(bntTd)
															 .appendTo("#student_list>tbody");
							});
			//注册编辑按钮
			table_editClick();
			//注册删除按钮
			table_deleteClick();
		}		
		// 显示分页信息
		function build_page_info(result) {
			var pageInfo = result.extend.PageInfo;
			//记录当前的页的号码
			currentPage=pageInfo.pageNum;
			//记录总的记录数
			totalItem=pageInfo.total;
			
			// 清空ul
			$("#page_info_total").empty();
			$("#page_info_total").append("当前" + pageInfo.pageNum + "页 , 共" + pageInfo.pages + "页,总共"+ pageInfo.total + "条记录");
			var ul = $("ul[class='pagination']");
			ul.empty();
			var firstLi = $("<li><button value='1'  class='btn btn-default btn-sm'>首页</button></li>");
			ul.append(firstLi);
			if (pageInfo.hasPreviousPage) {
				var pre = parseInt(pageInfo.pageNum) - 1;
				var previousPageLi = $("<li><button value='" + pre+ "' class='btn btn-default btn-sm' > &laquo;</button></li>");
				ul.append(previousPageLi);
			}
			// 遍历需要显示的页号
			$.each(pageInfo.navigatepageNums, function(index, item) {
				var li = $("<li></li>").append(
						"<button value='" + item + "' class='btn btn-default btn-sm'>"+ item + "</button>")
				if (pageInfo.pageNum == item) {
					li.addClass("active");
				}
				ul.append(li);
			});
			if (pageInfo.hasNextPage) {
				var next = parseInt(pageInfo.pageNum) + 1;
				var hasNextPageLi = $("<li><button value='" + next+ "' class='btn btn-default btn-sm'> &raquo;</button></li>");
				ul.append(hasNextPageLi);
			}
			var lastLi = $("<li><button value='" + pageInfo.pages+ "' class='btn btn-default btn-sm'>末页</button></li>");
			ul.append(lastLi);
			aClick();
		}
		// 分页里<a>标签的点击方法
		function aClick() {
			$("ul[class='pagination']>li").click(function() {
				var item = $("body>input[name='itemPram']").val();
				var term = $("body>input[name='termPram']").val();
				var pageNo = $(this).children("button").val();
				to_page(pageNo, item, term);
				return false;
			});
		}
		//编辑按钮
		function table_editClick(){
			$("#student_list button[title='table_edit']").click(function(){
				$("#editStudentModal").modal({
					backdrop:"static"
				});
				//设置编辑末台框的值
				setEditModalValue($(this));
			});
		}
		//设置编辑末台框的值
		function setEditModalValue(editButton){
			var tdArr=editButton.parent().siblings();
			$("#editStudentModal input[name='gender']").prop("checked",false);
			$("#editStudentModal input[name='stuId']").val($(tdArr[1]).text());
			$("#editStudentModal input[name='stuName']").val($(tdArr[2]).text());
			$("#editStudentModal input[name='age']").val($(tdArr[3]).text());
			$("#editStudentModal input[name='phone']").val($(tdArr[5]).text());				
			$("#editStudentModal textarea").val($(tdArr[0]).children().eq(1).val());
			if($(tdArr[4]).text()=="男"){
				$("#editStudentModal input[value='m']").prop("checked","checked");
			}else{
				$("#editStudentModal input[value='f']").prop("checked","checked");
			}				
		}
		function table_deleteClick(){
			$("#student_list button[title='table_delete']").click(function(){
				var stuId=$(this).parent().siblings().eq(1).text();
				var stuName=$(this).parent().siblings().eq(2).text();
				if(confirm("确认要删除该"+stuName+"学生吗?")){
					$.ajax({
						url:"${APP_PATH}/deleteStuById",
						data:"id="+stuId,
						type:"POST",
						success:function(result){
							alert(result.msg);			
							to_page(currentPage, null, null);
						}
					});		
				}						
			});
		}
		$("#query_bnt").click(function() {
			var intext = $("form>input[type='text']").val();
			var inputh = $("form>input[type='hidden']").val();
			if (inputh == "Id") {
				var reg = /^[0-9]+$/;
			} else if (inputh == "name") {
				var reg = /^[\w\u2E80-\u9FFF]{2,10}$/;
			} else if (inputh == "phone") {
				var reg = /^[\d]{5,20}$/;
			}
			if (!reg.test(intext)) {
				alert("输入的条件不合法");								
			}else{
				$("body>input[name='itemPram']").val(inputh);
				$("body>input[name='termPram']").val(intext);
				to_page(1,inputh,intext);
			}
			return false;			
		});	
		</script>
	<!-- 批量删除选择的学生信息 -->
	<script type="text/javascript">
			$("#deleteAllStudentBtn").click(function() {	
				var tableTrs = $("#student_list>tbody>tr")
				var sutIds="";
				var sutName="";
				$.each(tableTrs, function(index, item) {
					var check = $(item).children("td").eq(0).children().eq(0);
					var idTd = $(item).children("td").eq(1);
					var nameTd=$(item).children("td").eq(2);
					if (check.is(':checked')) {
						sutIds += idTd.text() + "-";
						sutName+=nameTd.text()+","
					}
				});
				if (sutIds.length>0) {
					stuIds = sutIds.substring(0, sutIds.length - 1);
					sutName = sutName.substring(0, sutName.length - 1);
					if(confirm("确认要删除"+sutName+"这些学生吗?")){
						$.ajax({
							url : "${APP_PATH}/deleteStuById",
							data : "id=" + stuIds,
							type : "POST",
							success : function(result) {
								alert(result.msg);
								to_page(currentPage, null, null);
							}
						});								
					}							
				}
			});
			
		</script>
</body>

</html>